<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!doctype html>
<html lang="zh-CN">
<head>
<meta content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" name="viewport" />
<meta charset="utf-8">
<title>人脉可变现，躺着拿黄金</title>
<style>
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{
	margin:0;
	padding:0;
	color : #803605;
} 
img{
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: 0;
}
li{
	list-style: none;
	text-align: left;
	padding-left: 5px;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
a{
	text-decoration: none;
	color: #000;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.clearfix:before,.clearfix:after {
	display: table;
	content: " ";
	line-height: 0;
	width: 100%;
	visibility: hidden;
}

.clearfix:after {
	clear: both;
}
.mask{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(255,255,255,0);
	display: none;
	z-index: 2;
}
.data-wrap{
	position: relative;
	padding: 30px 2% 0;
	background: linear-gradient(#fcdc87,#fbc123);
}
.my-data{
	position: absolute;
	background: #ffec17;
	width: 50%;
	height: 30px;
	line-height: 30px;
	left: 25%;
	top: 20px;
	z-index: 2;
	text-align: center;
	box-shadow: 2px 2px 2px #e9be30,-2px -2px 2px #e9be30;
}
.data-name:after,.data-name:before{
	position: absolute;
	top: 0px;
	content: '';
	display: block;
}
.data-name:before{
	width: 0;
	height: 0;
	left: -10px;
	border: 5px solid #f0d00c;
	border-color: transparent #f0d00c #f0d00c transparent;
}
.data-name:after{
	width: 0;
	height: 0;
	right: -10px;
	border: 5px solid #f0d00c;
	border-color: transparent transparent #f0d00c #f0d00c;
}
.data-content{
	width: 96%;
	background: #fcd15c;
	padding: 30px 2% 0;
	font-size: 14px;
}
.data-content1{
	width: 96%;
	background: #fcd15c;
	padding: 30px 2% 0;
	font-size: 14px;
}
.data-content tr td{
	width: 50%;
	line-height: 36px;
}
.data-content1 tr td{
	text-align: center;
	line-height: 36px;
}
.data-content tr:nth-child(even),
.data-content1 tr:nth-child(even){
	background: #fcd771;
}
</style>
</head>
<body style="background: #fbc123;">
	<div class="header">
		<img src="http://laicunba.b0.upaiyun.com/lcb/activity/gain_gold_top.png" />
	</div>
	<div class="data-wrap">
		<div class="my-data">
			<div class="data-name" style="position: relative;">我的大数据</div>
		</div>
		<div class="data-content">
			<table	style="width: 100%;">
				<tr>
					<c:choose>
						<c:when test="${remainGainCount > 0}"><td>剩余抽奖机会：${remainGainCount }次</td></c:when>
						<c:otherwise><td>剩余抽奖机会：0次</td></c:otherwise>
					</c:choose>
					<c:choose>
						<c:when test="${totalReward > 0 }"><td>累计抽中黄金：<fmt:formatNumber value="${totalReward }" pattern="##.####" minFractionDigits="4"></fmt:formatNumber>克 </td></c:when>
						<c:otherwise><td>累计抽中黄金：0.0000克 </td></c:otherwise>
					</c:choose>
				</tr>
				<tr>
					<c:choose>
						<c:when test="${inviteRegistCount > 0}"><td>累计邀请好友：${inviteRegistCount }人</td></c:when>
						<c:otherwise><td>累计邀请好友：0人</td></c:otherwise>
					</c:choose>
					<c:choose>
						<c:when test="${inviteInvestCount > 0 }"><td>好友投资人数：${inviteInvestCount }人</td></c:when>
						<c:otherwise><td>好友投资人数：0人</td></c:otherwise>
					</c:choose>
				</tr>
				<tr>
					<c:choose>
						<c:when test="${myInviteRank > 0 && myInviteRank <= 5}">
							<td>英雄榜中排名：第${myInviteRank }名</td>
						</c:when>
						<c:otherwise>
							<td>英雄榜中排名：未上榜</td>
						</c:otherwise>
					</c:choose>
				</tr>
			</table>
		</div>	
	</div>
	<div style="position: relative;padding: 30px 2% 0;margin: 20px 0 40px;">
		<div class="my-data">
			<div class="data-name" style="position: relative;">我的邀请榜</div>
		</div>
		<div class="data-content1">
			<div style="max-height: 220px;overflow: auto;">
				<table style="width: 100%;">
					<thead>
						<tr>
							<td>被邀请人</td>
							<td>首次投资金额 </td>
							<td>首次投资时间</td>
						</tr>
					</thead>
					<c:choose>
						<c:when test="${inviteInvestRank != null && fn:length(inviteInvestRank) > 0 }">
							<c:forEach items="${inviteInvestRank }" var="inviteInfo" varStatus="status">
								<c:if test="${status.index < 100 }">
									<tr>
										<td>${inviteInfo.mobile }</td>
										<td>${inviteInfo.buy_amount }</td>
										<td><fmt:formatDate value="${inviteInfo.pay_time }" pattern="yyyy.MM.dd"/></td>
									</tr>
								</c:if>
							</c:forEach>
						</c:when>
						<c:otherwise>
							<tr>
								<td colspan="3">暂无邀请榜</td>
							</tr>
						</c:otherwise>
					</c:choose>
				</table>
			</div>
		</div>	
	</div>
</body>
</html>